<template>
	<view class="default-page">
		<view class="default-content">
			<!-- 缺省图标 -->
			<view class="default-icon">
				<svg-icon :name="iconName" size="150" />
			</view>

			<!-- 缺省标题 -->
			<view class="default-title" v-if="title">{{ title }}</view>

			<!-- 缺省描述 -->
			<view class="default-description" v-if="tip">{{ tip }}</view>

			<!-- 操作按钮区域 -->
			<view class="default-actions" v-if="showRefresh">
				<button class="refresh-btn" @click="handleRefresh">
					<text class="btn-text">重新加载</text>
					<uni-icons type="loop" size="18" color="#fff"></uni-icons>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import SvgIcon from '@/components/svg-icon/svg-icon.vue'

// 定义props
const props = defineProps({
	// 缺省页标题
	title: {
		type: String,
		default: '暂无内容'
	},
	// 缺省页描述
	tip: {
		type: String,
		default: ''
	},
	// 是否显示刷新按钮
	showRefresh: {
		type: Boolean,
		default: false
	},
	// 自定义图标名称
	iconName: {
		type: String,
		default: 'no-data'
	}
})

// 定义事件
const emit = defineEmits(['refresh'])

// 处理刷新事件
const handleRefresh = () => {
	emit('refresh')
}
</script>

<style lang="scss" scoped>
.default-page {
	width: 100%;
	min-height: 400rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60rpx 40rpx;
	box-sizing: border-box;
}

.default-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 500rpx;
	width: 100%;
}

.default-icon {
	margin-bottom: 40rpx;
	animation: float 3s ease-in-out infinite;
}

.default-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #666;
	margin-bottom: 20rpx;
	line-height: 1.4;
}

.default-description {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 40rpx;
	text-align: center;
}

.default-actions {
	margin-top: 20rpx;
}

.refresh-btn {
	background: linear-gradient(135deg, #2fb8e2, #6fc9e4);
	color: white;
	border-radius: 50rpx;
	padding: 0rpx 40rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24rpx;
	box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.3);
	transition: all 0.3s ease;

	&::after {
		border: none;
	}

	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.4);
	}

	.btn-text {
		font-size: 28rpx;
		color: white;
	}
}

/* 浮动动画 */
@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
	.default-page {
		padding: 40rpx 20rpx;
		min-height: 300rpx;
	}

	.default-icon {
		margin-bottom: 30rpx;

		:deep(.svg-icon) {
			width: 100rpx !important;
			height: 100rpx !important;
		}
	}

	.default-title {
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}

	.default-description {
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}
}
</style>